<template>
    <van-nav-bar title="初始化密码" left-text="返回" left-arrow @click-left="onClickLeft"></van-nav-bar>
    <div class="login-page py-30px">
        
        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <van-field v-model="formState.phoneNumber" required  label="手机号" placeholder="请填写手机号" clearable
                    :rules="[{ required: true, validator:validateMobile, message: '请填写正确手机号' }]">
                </van-field>
                <van-field v-model="formState.newPassword" required    type="password" label="密码" placeholder="请填写密码" clearable
                    :rules="[{ required: true, validator: validatePassword,message:'密码8-16位，必须包含数字和字母！' }]">
                </van-field>
                <van-field v-model="formState.confirmPassword" required     type="password" clearable label="确认密码"
                    placeholder="请输入密码" :rules="[{ required: true, validator: confirmPassword, message: '两次输入密码不一致!' }]" />
            </van-cell-group>
            <div class="loginBtn">
                <van-button round block type="primary" native-type="submit">确认</van-button>
            </div>
        </van-form>
    </div>
</template>

<script setup>
import { defineComponent, reactive, ref, createApp } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { Toast } from "vant";
import URL from "../api/api";
import sha256 from "js-sha256";
import {editPwd} from "../api/user"
const router = useRouter();
const store = useStore();
const formRef = ref();
const formState = reactive({
    phoneNumber: "",
    newPassword: "",
    confirmPassword: "",
});
const onClickLeft = () => {
    router.push("/main");
};
const validateMobile = (value) => {
      if(!!value && !/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(value)) {
         return false
      } else {
        return true
      }
    }

const validatePassword = (value) => {
        if (!!value && !/^(?![^a-zA-Z]+$)(?!\D+$)/.test(value)) {
            return false
        } else{
            return true
        }
  
}
const confirmPassword = (value) => {
    if (!!value && value!== formState.newPassword) {
        return false
    } else {
        return true
    }
    return Promise.resolve()
}
const onSubmit = () => {
    
    const params = Object.assign({}, formState);
    params.newPassword = sha256(formState.newPassword);
    params.confirmPassword = sha256(formState.confirmPassword);
    editPwd(params).then(res=>{
        if(res.data.code == 200){
            Toast.success("初始化成功");
            router.push("/login");
            resetForm()
        }else{
            Toast.fail(res.data.message);
        }
    })

};

const resetForm = () => {
    formRef.value.resetFields();
};


</script>

<style scoped>
.login-page {
    background: #F4F4F4;
    background-size: cover;
    overflow: hidden;
    height: 100vh;
    width: 100%;
}
:deep(.van-nav-bar__title) {
    color: #000;
}

.logo {
    width: 200px;
    height: 150px;
    margin-top: 30px;
    margin-bottom: 60px;
}

.verifyCode {
    width: 20%;
}

.loginBtn {
    width: 90%;
    margin: 80px auto;
    display: block;

}

.van-nav-bar {
    background: unset;
}

.verifyCode {
    width: 20%;
}
</style>